import React, { useEffect, useState } from "react"
import { Form, Input, Button, Checkbox, Cascader ,message} from 'antd';
import "../../static/css/Department/DepartmentAddUp.css"
import {getList} from '../../apis/department/list'
import {postAdd} from '../../apis/department/add'
import { useNavigate } from "react-router";

interface Option {
    id: number ;
    name: string;
    parent_id:number;
    user:string;
    user_mobile:number | null;
    openid:number|null
    son?: Option[];
}

const onChange: any = (value: string[]) => {
    console.log(value);
};
const fieldNames:any = { label: 'name', value: 'id', children: 'son' }
const DepartmentAddUp: React.FC = (): JSX.Element => {
    const navigate=useNavigate()
    const [data,setData]=useState<Array<Option>>()
    // 调用级联选择器接口数据
    const getListInfo=async ()=>{
        const res:any=await getList()
        if(res.code==='00000'){
            setData(res.data)
        }else{
            message.error(res.msg);
        }
        
    }
    useEffect(()=>{
        getListInfo()
    },[])
    const [form] = Form.useForm();
    // 调用添加接口
    const addInfo=async (params:any)=>{
        const res:any=await postAdd(params)
        if(res.code==='00000'){
            message.success("添加成功");
            navigate('/department/list')
        }else{
            message.error(res.msg)
        }
        
    }
    const onFinish = (values: any) => {
        // console.log('Success:', values);
        const params={...values,parent_id: values.parent_id>=1 ? values.parent_id[values.parent_id.length-1]:0}
        // console.log(params);
        addInfo(params)
        
        
    };
    const onReset = () => {
        form.resetFields();
    };
    
    return (
        <div className="departmentAddUpBody">
            <div className="type">
                <h3>添加</h3>
            </div>
            <div className="form">
                <Form
                    name="basic"
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 6 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                    form={form}
                >
                    <Form.Item
                        label="选择父级部门"
                        name="parent_id"
                    >
                        <Cascader size="small" fieldNames={fieldNames} options={data} onChange={onChange} placeholder="请选择" />
                    </Form.Item>
                    <Form.Item
                        label="部门名称"
                        name="name"
                        rules={[{ required: true, message: '请输入部门名称' }]}
                    >
                        <Input size="small" />
                    </Form.Item>
                    <Form.Item
                        label="负责人名称"
                        name="user"
                        rules={[{ required: true, message: '请输入负责人名称' }]}
                    >
                        <Input size="small" />
                    </Form.Item>
                    <Form.Item
                        label="负责人手机号"
                        name="user_mobile"
                        rules={[{ pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '请输入正确的手机号' }]}
                    >
                        <Input size="small" />
                    </Form.Item>
                    <Form.Item
                        label="openid"
                        name="openid"
                        rules={[{ required: true, message: '请输入openid' }]}
                    >
                        <Input size="small" />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 3, span: 6 }}>
                        <Button htmlType="button" onClick={onReset} style={{ backgroundColor: '#909399', color: '#fff', border: 'none', marginRight: '10px' }}>
                            重置
                        </Button>
                        <Button type="primary" htmlType="submit" style={{ border: 'none' }}>
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}
export default DepartmentAddUp